Both the writable and readable stores have a similarity: they follow the store contract .

Svelte has a useful special syntax for using stores that leverages this store contract. But first, let's see how we do it before using that:

<script>
	import Input from "./Input.svelte";
	import Output from "./Output.svelte";
</script>

<Input />
<Output />

store1 is a readable store with the default value 0 that then increases by 1 every second.

store2 is a writable store that updates every time you type in the input field.

Both of these stores follow the store contract . This allows us to use the special syntax which is a $ prefix before the variable.

This way we can assign a value to the store directly without using set().

When we use the syntax when displaying the value it does three things:

• Subscribes to the store.
• The value is always updated as the latest value of the store.
• When unmonted, it will automatically unsubscribe.

<script>
	import Input2 from "./Input2.svelte";
	import Output2 from "./Output2.svelte";
</script>

<Input2 />
<Output2 />

This is the power of the store contract . By following it we can reference the store value by using the $ prefix and also assign to it like if it was a normal variable.

So what is the store contract?

Your subscriber method needs to:

• Be an object that
• Takes in a function and call that function immediately (synchronously)
• Returns a function that unsubscribes the function
• At some point loops through the subscribers list and call them with the value of the store
• (optional) Implements a set method that takes in a value that you update the store with when using $store as in for example $store = "hello"

If you do that you will be able to use the $ prefix.

<script>
	import Input3 from "./Input3.svelte";
	import Output3 from "./Output3.svelte";
</script>

<Input3 />
<Output3 />